<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
文档列表:
<select name="categoryId">
    <option value="">全部</option>
</select>
<button onclick="query()" id="query">查询</button>
<button onclick="add()" id="add">新增电子文档</button>
<h1>电子文档列表</h1>
<table border="1">
    <tr>
        <td>文档编号</td>
        <td>文档名称</td>
        <td>文档摘要</td>
        <td>上传人</td>
        <td>上传时间</td>
        <td>操作</td>
    </tr>
    <tr th:each="list : ${list}">
        <td>[[${list.id}]]</td>
        <td>[[${list.title}]]</td>
        <td>[[${list.summary}]]</td>
        <td>[[${list.uploaduser}]]</td>
        <td th:text="${#dates.format(list.createdate,'yyyy-MM-dd')}"></td>
        <td>
            <a th:href="@{/selectById(id=${list.id})}" href="javascript:void(0)" onclick="update([[${list.id}]])">修改
            </a>
            <a href="javascript:void(0)" th:onclick="'del(' + ${list.id} + ')'">删除</a>
        </td>
    </tr>
<!--    <c:forEach items="${list}" var="list">-->
<!--        <tr>-->
<!--            <td>${list.id}</td>-->
<!--            <td>${list.title}</td>-->
<!--            <td>${list.summary}</td>-->
<!--            <td>${list.uploaduser}</td>-->
<!--            <td><fmt:formatDate value="${list.createdate}" pattern="yyyy-MM-dd" /></td>-->
<!--            <td>-->
<!--                <a href="javascript:void(0)" onclick="update(${list.id})">修改</a>-->
<!--                <a href="javascript:void(0)" onclick="del(${list.id})">删除</a>-->
<!--            </td>-->
<!--        </tr>-->
<!--    </c:forEach>-->
</table>
<p>
    <a th:href="@{/list(startIndex=1)}">首页</a>
    <a th:href="@{/list(startIndex=${startIndex - 1})}">上一页</a>
    <a th:href="@{/list(startIndex=${startIndex + 1})}">下一页</a>
    <a th:href="@{/list(startIndex=${pageCount})}">尾页</a>
    <span>第[[${startIndex}]]页/共[[${pageCount}]]页</span>
</p>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    var contextPath = ""+[[${#request.contextPath}]];
    $(function () {
        category();
    })

    function category() {

        $.get([[${#request.contextPath}]]+'/categoryList', function (data) {
            console.log(data)
            let list = data;
            let selectElement = $("select[name='categoryId']"); // 获取选择框元素
            let categoryId = parseInt(''+[[${categoryId}]]);
            for (let i = 0; i < list.length; i++) {
                var option = '<option';
                if (categoryId == list[i].id) {
                    option += ' selected';
                }
                option += ' value="' + list[i].id + '">' + list[i].name + '</option>';
                selectElement.append(option);
                // 创建选项并添加到选择框中
                // selectElement.append(`<option <c:if test="\${categoryId==list[i].id}">selected</c:if> value="\${list[i].id}">\${list[i].name}</option>`);
            }
        },'json');
    }

    function query() {
        let categoryId = $("select[name='categoryId']").val();
        location.href=contextPath+"/list?categoryId=" + categoryId
    }

    function add(){
        location.href=contextPath+'/add';
    }

    function update(id){
        location.href=contextPath+'/selectById?id='+id;
    }

    function del(id){
        if(confirm("确定要删除吗？")){
            location.href=contextPath+'/delete?id='+id;
        }
    }
</script>
</html>
